<script setup lang="ts">
import { useShop } from "./utils/hook";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { ref, computed, nextTick, onMounted,onBeforeUnmount } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  delay,
  subBefore,
  deviceDetection,
  useResizeObserver
} from "@pureadmin/utils";

import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";

defineOptions({
  name: "SystemShop"
});



const treeRef = ref();
const formRef = ref();
const tableRef = ref();
const contentRef = ref();

const {
  form, isShow, curRow, loading, columns,
  rowStyle,
  dataList,
  exportExcel,dictList,
  groupList,
  userOptions,
  isLinkage,
  pagination,
  isExpandAll,
  isSelectAll,
  // buttonClass,
  onSearch,
  resetForm,
  openDialog,destoryData,
  handleSave,
  handleDelete,
  filterMethod,
  transformI18n,
  onQueryChanged,
  // handleDatabase,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = useShop(treeRef);

onMounted(() => {
  useResizeObserver(contentRef, async () => {
    await nextTick();
  });
  window.addEventListener('keyup', handleEnterKey);
});
onBeforeUnmount(() => {
  window.removeEventListener('keyup', handleEnterKey);
});
const handleEnterKey = (e) =>{
  if (e.key === 'Enter') {
    onSearch();
  }
}
</script>

<template>
  <div class="main">
    <el-form ref="formRef" :inline="true"  :model="form" size="small" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
      <el-form-item label="" prop="shop_name">
        <el-input
          v-model="form.shop_name"
          placeholder="输入店铺名称或ID(支持模糊查询)"
          clearable
          class="!w-[190px]"
        />
      </el-form-item>
      <el-form-item label="" prop="status">
        <el-select v-model="form.status" placeholder="请选择saas店铺状态" clearable class="!w-[180px]" >
          <el-option label="已启用" value="1" />
          <el-option label="已停用" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="status2">
        <el-select v-model="form.status2" placeholder="请选择店铺状态" clearable class="!w-[180px]" >
          <el-option label="已启用" value="1" />
          <el-option label="已停用" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="standard_code">
        <el-select v-model="form.standard_code" placeholder="请选择币种" clearable filterable class="!w-[180px]" >
          <el-option v-for="(item) in dictList.filter(x=>x.dic_id==2)" :label="item.value" :value="item.label"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="own_user">
        <el-select v-model="form.own_user" placeholder="请选择投放用户" clearable filterable class="!w-[180px]" >
          <el-option v-for="(item) in userOptions" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
  <!--      <el-form-item label="" prop="state">-->
<!--        <el-select v-model="form.group" placeholder="请选择店铺分组" clearable class="!w-[180px]" >-->
<!--          <el-option v-for="(item) in groupList" :label="item.group_name" :value="item.id"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch"> {{ t("buttons.search") }}</el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">{{ t("buttons.reset") }} </el-button>
      </el-form-item>
    </el-form>

    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
      <PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title="店铺管理" :columns="columns"
        @refresh="onSearch">
        <template #buttons>
          <el-button v-perms="'SystemShop:btn:export'" type="primary" size="small" :icon="useRenderIcon('fa-solid:file-export')" @click="exportExcel">{{ t("buttons.exportExcel") }} </el-button>
          <el-button v-perms="'SystemShop:btn:add'" type="primary" size="small" @click="openDialog('新增',{})">{{ t("buttons.add") }} </el-button>
        </template>
        <template v-slot="{ size, dynamicColumns }">
          <pure-table ref="tableRef" align-whole="center" showOverflowTooltip
            table-layout="auto" :loading="loading"
            :size="size" adaptive :row-style="rowStyle"
            :adaptiveConfig="{ offsetBottom: 108 }"
            :data="dataList" :columns="dynamicColumns"
            :pagination="{ ...pagination, size }"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button v-perms="'SystemShop:btn:edit'" class="reset-margin" link type="primary"
                :size="size" :icon="useRenderIcon(EditPen)" @click="openDialog('编辑', row)">
                {{ t("buttons.edit") }}
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>

</template>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
